<script setup lang="ts">
import type {FormInstance, FormRules} from "element-plus";
import { pcaTextArr } from 'element-china-area-data'
type FormType={
  id?:string,
  host:string,
  type:string,
  value:string,
  ttl:string,
  level:string,
  line:string,
}
definePageMeta({
  layout:'admin',
  title:'添加域名模板',
});
import {CERTIFICATE_TYPE, DNS_LINE} from "~/const/Maps";
import {DNS_TYPE} from "~/const/common";
const rules=reactive<FormRules<FormType>>({
  host: [
    { required: true, message: '请输入主机名', trigger: 'blur' },
      // ip地址正则
    {pattern:/^((25[0-5]|2[0-4]\d|1\d{2}|[1-9]\d|\d)\.){3}(25[0-5]|2[0-4]\d|1\d{2}|[1-9]\d|\d)$/,message:'请输入正确的ip地址',trigger:'blur'  },
  ],
  type: [
    { required: true, message: '请选择解析类型', trigger: 'change' },
  ],
  value: [
    { required: true, message: '请输入解析值', trigger: 'blur' },
  ],
  ttl: [
    { required: true, message: '请输入解析生效时间值', trigger: 'blur' },
    {validator:(rule, value, callback)=>{
      if(value*1<60||value*1>86400){
        callback(new Error('请输入60-86400之间的数字'))
      }else{
        callback()
      }
    },trigger:'blur'}
  ],
  level: [
    { required: true, message: '请输入优先级别', trigger: 'blur' },
    {validator:(rule, value, callback)=>{
      if(value*1<1||value*1>100){
        callback(new Error('请输入1-100之间的数字'))
      }else{
        callback()
      }
    },trigger:'blur'}
  ],
})
const formRef=ref<FormInstance>()
const form=reactive<FormType>({
  id:'',
  host:'',//www 主机名
  type:'',//A A,CNAME,MX,TXT,AAAA,SRV
  value:'',//0.0.0.0 解析值
  ttl:'',//解析生效时间值 60~86400 单位秒 (默认900)
  level:'',//优先级别 1-100 默认(10)
  line:'',// 默认="" 电信="LTEL" ,联通="LCNC" ,移动="LMOB" ,教育网="LEDU" ,搜索引擎="LSEO"
});
const route=useRoute()
if(route.query.form){
  const form1=JSON.parse(route.query.form as string) as FormType;
  Object.keys(form1).forEach(key=>{
    if(key=='item'){
      form['host']=form1[key];
    }else{
      form[key]=form1[key]
    }
  })
}
const submit=async ()=>{
  if(formRef.value){
    formRef.value?.validate(async (isValid, invalidFields)=>{
      if(isValid){

        const {code}=await usePost('/west/createParse',{...form,domain:route.query.domain as string})
        if(code==200){
          ElMessage.success(form.id?'编辑成功':'添加成功')
          formRef.value?.clearValidate?.()
          formRef.value?.resetFields?.()
          const router=useRouter()
          router.push(`/admin/domain/dns?domain=${route.query.domain}`)
        }
      }else{
        showFieldsError(invalidFields);
      }
    })
  }
}
</script>

<template>
  <div>
    <AuthenText>
<pre>
功能介绍：使用本功能，可为域名添加DNS解析
</pre>
    </AuthenText>
    <el-card>
      <el-form :model="form" :rules="rules" ref="formRef" label-suffix="：" label-width="100" class="w-[500px] mx-auto">
        <el-form-item label="主机名" prop="host">
          <el-input v-model="form.host" placeholder="请输入主机名"></el-input>
        </el-form-item>
        <el-form-item label="解析类型" prop="type">
          <el-select v-model="form.type" placeholder="请选择解析类型">
            <el-option :label="item" :value="item" v-for="item in DNS_TYPE"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="解析值" prop="value">
          <el-input v-model="form.value" placeholder="请输入解析值"></el-input>
        </el-form-item>
        <el-form-item label="解析生效时间值" prop="ttl">
          <el-input v-model="form.ttl" placeholder="解析生效时间值 60~86400 单位秒 (默认900)"></el-input>
        </el-form-item>
        <el-form-item label="优先级别" prop="level">
          <el-input v-model="form.level" placeholder="优先级别 1-100 默认(10)"></el-input>
        </el-form-item>
        <el-form-item label="线路" prop="line">
          <el-select v-model="form.line" placeholder="请选择线路">
<!--            默认=""-->
            <el-option :label="label" :value="value" v-for="(label,value) in DNS_LINE"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submit">提交</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>

</template>

<style scoped lang="scss">

</style>